<template>
  <div class="all-wrap">
    <order-tab></order-tab>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      :disabled="disabled">
      <common-scroll class="scroll"
                     ref="scroll"
                     :data="list"
                     :listenScroll="listenScroll"
                     @pullingUp="handlePullUp"
                     @scrollend="handleScrollEnd">
        <div class="scroll-content">
          <ul v-if="list.length">
            <li v-for="item of list"
                :key="item.order_id"
                @click="handleDetail(item.order_id)">
              <order-list :orderNo="item.order_no"
                          :status="item.status.status"
                          :list="item.goods" :payPrice="item.pay_price"></order-list>
            </li>
          </ul>
          <load-more v-show="loadMore"
                     :title="loadMoreTitle"></load-more>
        </div>
      </common-scroll>
    </van-pull-refresh>
  </div>
</template>
<script>
import OrderTab from '../components/tab'
import OrderList from '../components/list'
import CommonScroll from 'common/scroll/scroll'
import LoadMore from 'common/loadMore/loadmore'
export default {
  name: 'paid',
  components: {
    OrderTab,
    OrderList,
    CommonScroll,
    LoadMore
  },
  data () {
    return {
      order_no: 0,
      list: [],
      page: 1,
      loadMore: false, // 加载更多
      total: 0, // 推荐总条数
      loadMoreTitle: '加载中...',
      scrollHeight: 0, // 滚动高度
      isLoading: false,
      disabled: false, // 是否可以下拉刷新
      loading: true
    }
  },
  created () {
    this.getList()
    this.listenScroll = true
    this.pullDownRefresh = true
  },
  methods: {
    getList () {
      const page = this.page
      const type = 'pay'
      this.$api.order.list({ page, type })
        .then(this.getListSucc)
        .catch((e) => {
          this.$errorTip()
          this.loading = false
        })
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = this.list.concat(data.order)
        this.total = data.total
        this.loadMore = false
        this.isLoading = false
        this.loading = false
      }
    },
    // 上拉加载更多
    handlePullUp () {
      this.loadMore = true
      const flag = this.judge()
      if (flag) {
        this.page += 1
        this.getList()
      } else {
        this.loadMoreTitle = '没有更多'
      }
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullUp()
    },
    // 判断总条数是否大于列表长度
    judge () {
      const total = this.total
      const length = this.list.length
      return total > length
    },
    // 滚动事件
    handleScrollEnd (pos) {
      this.scrollHeight = pos.y
    },
    handleDetail (id) {
      this.$router.push({
        path: `/me/order/detail/${id}`
      })
    },
    // 下拉刷新
    onRefresh () {
      this.loadMore = false
      this.loadMoreTitle = '加载中...'
      const _this = this
      const msg = '刷新成功'
      this.page = 1
      this.list = []
      Promise.all([_this.getList()]).then((res) => {
        this.$tip(msg)
      }).catch((e) => {
        this.$errorTip()
        this.$nextTick(() => {
          this.isLoading = false
        })
      })
    }
  },
  watch: {
    scrollHeight (newY) {
      console.log(newY)
      this.disabled = newY < 0
      console.log(this.disabled)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.all-wrap >>> .van-pull-refresh__head
  font-size $shop_name

.all-wrap >>> .van-pull-refresh
  background-color $recommend_bgc

.all-wrap >>> .van-pull-refresh__track
  width 100%
  height calc(100vh -88px -67px)

.all-wrap
  initPosition()
  top 88px
  padding-top 67px
  background-color $recommend_bgc
  box-sizing border-box

  .scroll
    top 0

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
